<template>
  <div>
    <div class="luckim kim" ref="kimbox" v-show="!closed">
      <div class="luckim-background kim-bg" :style="{'background-image': 'url('+store.state.skinImg+')'}"></div>
      <div class="luckim-layer-title kim-drag" style="cursor:move"></div>
      <div class="luckim-layer-info luckim-unselect kim-ubox">
        <img class="avatar" :src="mine.avatar">
        <!-- 用户状态，1是绿色，0是橙色 -->
        <div :class="['kim-u-state',['hiding','online'][store.state.mine.state]]" @click.stop="showStateBtn=true"
             :title="['隐身','在线'][store.state.mine.state]">
          <div class="pane" v-show="showStateBtn">
            <div class="li" @click.stop="setState(1)">在线</div>
            <div class="li" @click.stop="setState(0)">隐身</div>
          </div>
        </div>
        <span class="luckim-user kim-nickname">{{ mine.name }}</span>
        <span class="luckim-sign" :title="mine.sign">{{ mine.sign }}</span>
      </div>
      <div class="luckim-tabs luckim-unselect">
        <div class="tabs-nav">
          <li title="好友" class="bx-friend" @click="activeTab=0" :active="activeTab==0">好友</li>
          <li title="群组" class="bx-group" @click="activeTab=1" :active="activeTab==1">群组</li>
          <li title="消息" class="bx-msg" @click="activeTab=2" :active="activeTab==2">消息</li>
        </div>
        <div class="tabs-content">
          <div class="tab-pane" v-show="activeTab==0" >

            <li class="friend-group" state="1" groupid="1" v-for="fg in friends" :key="fg.id">
              <div class="word" @click="fg.open=!fg.open">
                <span class="iconfont">{{fg.open? '&#xe69d;':'&#xe69f;'}}</span>
                <span class="fg-name">{{ fg.groupname }}</span>
                <span class="num">(
                  <span class="cort">{{ fg.list.length }}</span>
                  )
                </span>
              </div>
              <ul class="luckim-list" style="display:block" v-show="fg.open">
                <li class="luckim-friend" :userid="fr.id" :groupid="fg.id"
                    v-for="fr in fg.list" :key="fr.id" @click="onFriendClick(fr)">
                  <img :src="fr.avatar" :class="[fr.state==0?'filter-gray':'']">
                  <span class="lu-name ddd">{{ fr.name }}</span>
                  <span class="lu-sign ddd" :title="fr.sign">{{ fr.sign }}</span>
                </li>

              </ul>
            </li>

          </div>
          <div class="tab-pane" v-show="activeTab==1" >
            <!-- 群聊列表 -->
            <ul class="luckim-list" style="display:block">
              <li class="luckim-group" groupid="101"
                  v-for="gr in groups" :key="gr.id" @click="onGroupClick(gr)">
                <img :src="gr.avatar">
                <span class="lu-name ddd">{{ gr.name }}</span>
                <span class="lu-sign ddd" title=""></span>
              </li>

            </ul>

          </div>
          <!-- 聊天列表 -->
          <div class="tab-pane" v-show="activeTab==2" >
            <ul class="luckim-list kim-chat" style="display:block" >
              <li class="luckim-friend kim-chat-item" :userid="co.id"
                  v-for="co in chats" :key="co.id" @click="onChatClick(co)">
                <img :src="co.avatar" :class="[co.state==0?'filter-gray':'']">
                <span class="lu-name ddd">{{ co.name }}</span>
                <span class="lu-sign ddd" :title="co.sign">{{ co.sign }}</span></li>
            </ul>
          </div>
        </div>
        <div class="tabs-mask"></div>
      </div>
      <div class="kim-close" @click="onCloseBtnClick">
        <span class="iconfont icon-close"></span>
      </div>
      <ul class="luckim-unselect luckim-toolbar">
        <li  v-for="(cf,index) in toolbar" :key="index" :title="cf.text" @click="cf.click"><span :class="cf.icon"></span></li>
      </ul>
    </div>

    <chatbox ref="chatbox"
        @on-send="onSendMessage"
        @group-member-click="onGroupMemberClick"
    ></chatbox>
    <toast ref="toast"></toast>

    <!-- 最小化之后显示的悬浮按钮 -->
    <transition name="fade">
    <div class="kim-bar" v-show="closed" @click="closed=false">
      <img :src="mine.avatar" class="avatar" alt="">
      <span class="name">{{ mine.name }}</span>
    </div>
    </transition>



  </div>
</template>

<script>
import {drag} from "@/kim/utils/utils";
import store from "@/kim/store";
import Chatbox from "@/kim/chatbox";
import event from "@/kim/utils/event";
import Toast from "@/kim/components/toast";

import Vuex from 'vuex'
import Vue from "vue";

Vue.use(Vuex)


export default {
  name: "kim-vue",
  data() {
    return {
      closed:false, //是否处于关闭状态
      activeTab:0, //激活哪个tab页
      showStateBtn:false, //显示状态按钮
    }
  },
  mounted() {
    store.state.kimInstance = this;
    new drag('.kim-drag', '.kim');
    let box = this.$refs.kimbox;

    /* 浏览器窗口大小改变时，主面板移动到右下角 */
    let fun=(function (){
      let left = window.innerWidth-box.offsetWidth;
      let top = window.innerHeight-box.offsetHeight;
      box.style.left = left + 'px';
      box.style.top = top + 'px';
    });fun();
    window.addEventListener('resize',fun);

  },
  components: {Toast, Chatbox},
  methods: {
    config(opts) {
      let cfg = {...store.state.config,...opts};
      Object.assign(store.state.config, cfg);
      //Object.assign(store.state.toolbar, cfg.toolbar);
      //Object.assign(store.state.editorToolbar, opts.editorToolbar);
      //Object.assign(store.state.uploadImageApi, opts.uploadImageApi);
      console.log('更新设置',store.state.config)
    },
    // 功能：移动聊天窗口位置
    chatboxMoveTo(x, y) {
      let chatbox = this.$refs.chatbox;
      chatbox.moveTo(x, y);
    },
    // 聊天图片被双击
    onImageDblClick(img) {
      console.log('图片被双击', img);
      this.$emit('on-chat-image-dblclick', img)
    },
    // 群成员被点击
    onGroupMemberClick(member) {
      console.log('群成员被点击', member);
      this.$emit('on-group-member-click', member)
    },
    // 发送按钮被点击
    onSendMessage(msg) {
      this.$emit('on-send', msg);
    },
    onCloseBtnClick() {
      console.log('关闭按钮被点击');
      this.closed=true;
    },
    onFriendClick(friend) {
      console.log(friend)
      let chatbox = this.$refs.chatbox;
      friend.type = 'friend';
      chatbox.chat(friend);
    },
    onGroupClick(group) {
      let chatbox = this.$refs.chatbox;
      group.type = 'group';
      chatbox.chat(group);
    },
    onChatClick(chat) {
      this.$refs.chatbox.chat(chat);
    },

    /*从好友面板中移除 */
    removeFriend(userid) {
      store.commit('removeFriend', userid);
    },
    /* 更新好友在线状态 */
    setFriendState(friendId, state) {
      let fr = store.getFriend(friendId);
      if (fr) {
        fr.state=state;
      }
    },
    /* 获取面板中的好友信息 */
    getFriend(friendId) {
      return store.getFriend(friendId);
    },
    /**
     * 添加聊天信息
     * @param data {type,id,fromid,name,avatar,content,mine,timestamp }
     */
    newMessage(data){
      console.log('chatbox',this.$refs.chatbox)
      this.$refs.chatbox.newMessage(data);
    },
    //修改在线状态
    setState(state){
      this.showStateBtn=false;
      this.$set(this.mine,'state', state);
      this.$emit('on-state-change',state);
    },
    //震动
    shake(){
      this.$refs.chatbox.shake(700);
    },
  },
  computed:{
    toolbar() {
      return store.state.config.toolbar;
    },
    mine(){
      return store.state.mine;
    },
    friends() {
      return store.state.friends;
    },
    groups() {
      return store.state.groups;
    },
    chats() {
      return store.state.chats;
    },
    chating() {
      return store.state.chating;
    },
    store() {
      return store;
    },
    scrollbarWidth() {
      return document.documentElement.clientWidth - document.documentElement.offsetWidth;
    }
  }
}
</script>

<style scoped>



.kim{
  z-index: 19900827; width: 260px; height: 528px;
}
.kim-bar {
  position: fixed;
  right: 0;
  bottom: 0;
  width: fit-content;
  height: 50px;
  background-color: #ffffff;
  box-sizing: border-box;
  border-radius: 2px;
  box-shadow: 1px 1px 50px rgba(0,0,0,.2);
  cursor: pointer;
  border: 1px solid #D7D7D7;
  padding: 5px 0 0 3px;
}
.kim-bar .avatar{
  width: 38px;
  height: 38px;
  border-radius: 50%;
}
.kim-bar .name{
  display: inline-block;
  position: relative;
  top: -14px;
  padding: 0 5px;
  font-size: 16px;
}
.kim-bg{
background-position: -100px -90px; opacity: 0.5;
}
.kim-u-state {
  position: absolute;
  border-radius: 50%;
  width: 12px;
  height: 12px;
  background-color: #54da54;
  top: 30px;
  left: 40px;
  z-index: 999;
  cursor: pointer;
}
.kim-u-state .pane{
  width: 60px;
  border: 1px solid #bfbfbf;
  background-color: #ffffff;
  box-shadow: 0px 0px 10px #7c7c7c;
  top: 20px;
  position: absolute;
  left: -23px;
  padding: 5px 0;
}
.kim-u-state .pane{
  width: 60px;
  border: 1px solid #bfbfbf;
  background-color: #ffffff;
  box-shadow: 0px 0px 10px #7c7c7c;
  font-size: 14px;
}
.kim-u-state .pane .li{
  height: 22px;
  line-height: 22px;
  text-align: center;
}
.kim-u-state .pane .li:hover{
  background-color: #c1c1c1;
  cursor: pointer;
}
.kim-u-state.online{
  background-color:#54da54;
}
.kim-u-state.hiding{
  background-color:#ff8a00;
}
.kim-ubox{
  position: relative;
}
.kim-nickname{
  top: 0px;
}

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-active {
  opacity: 0;
}

</style>
